<template>
  <div class="wrap">
    <el-card class="header-card">
      <div class="item font-bold">
        <p class="font-bold">结算周期：{{data.year}} - {{data.month}}</p>
        <p class="font-bold">
          <span class="mgr20">总订单数：{{data.stickerOrderNum}}</span>
          <span class="mgr20">总头程票数：{{data.FLShipmentNum}}</span>
          <span class="mgr20">总送仓票数：{{data.middleOrderNum}}</span>
          <span class="mgr20">总贴标票数：{{data.labelOrderNum}}</span>
        </p>
        <p class="font-bold">
          <span class="mgr20">总代发服务费：{{data.stickerFee}}</span>
          <span class="mgr20">总头程服务费：{{data.FLShipmentFee}}</span>
          <span class="mgr20">总送仓服务费：{{data.middleOrderFee}}</span>
          <span class="mgr20">总贴标服务费：{{data.labelOrderFee}}</span>
        </p>
        <p class="font-bold">总结算费用（元）：{{ data.totalFee }}</p>

      </div>
      <div class="button">
        <div>
          <el-button type="primary" @click="downLoad" :loading="downloadLoading">{{$t('data.Download settlement statement')}}</el-button>
        </div>
      </div>
    </el-card>
    <div class="content">
      <el-radio-group v-model="tab" @change="changeOption">
        <el-radio-button
          v-for="item in tabList"
          :key="item.name"
          :label="item.name"
        >{{item.label}}</el-radio-button>
      </el-radio-group>
      <div class="table mgt10" v-loading="tableLoading">
        <template v-if="tab === 'order'">
          <sticker-order-table :table-data="tableData"></sticker-order-table>
        </template>
        <template v-else-if="tab === 'FLShipment'">
          <f-l-shipment-table :table-data="tableData"></f-l-shipment-table>
        </template>
        <template v-else-if="tab === 'middleOrder'">
          <middle-order-table :table-data="tableData"></middle-order-table>
        </template>
        <template v-else-if="tab === 'labelOrder'">
          <label-order-table :table-data="tableData"></label-order-table>
        </template>
        <div class="page-wrap">
          <el-pagination
            @current-change="getData"
            :current-page="tableParams.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="tableParams.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  exportSettleById,
  getFLShipmentList, getLabelOrderList,
  getMiddleOrderList,
  getSettlementInfo,
  getSettlementList,
  getStickerOrderList
} from "@/api/middle";
import StickerOrderTable from "@/views/middle/components/StickerOrderTable.vue";
import LabelOrderTable from "@/views/middle/components/LabelOrderTable.vue";
import MiddleOrderTable from "@/views/middle/components/MiddleOrderTable.vue";
import FLShipmentTable from "@/views/middle/components/FLShipmentTable.vue";
import {EventBus} from "@/utils/eventBus";

export default {
  name: "middleSettlementList",
  components: {FLShipmentTable, MiddleOrderTable, LabelOrderTable, StickerOrderTable},
  data(){
    return {
      id: 0,
      loading: false,
      tab: 'order',
      queryParams: {
        page: 1,
        pageSize: 20,
        status: '',
      },
      data: {
        stickerPrice: 0, // 贴标单价
        FLVotePrice: 0, // 头程票价
        FLBoxPrice: 0, // 头程箱价
        middleVotePrice: 0, // 送仓票价
        middleBoxPrice: 0, // 送仓箱价
        labelVotePrice: 0, // 贴标单价
        labelGoodsPrice: 0, // 贴标商品价
      },
      total: 0,
      tableData: [],
      tabList: [
        {label: '代发数据', name: 'order'},
        {label: '头程数据', name: 'FLShipment'},
        {label: '送仓数据', name: 'middleOrder'},
        {label: '贴标数据', name: 'labelOrder'},
      ],
      tableParams: {
        page: 1,
        pageSize: 20,
        times: [],
      },
      tableLoading: false,
      downloadLoading: false,
    }
  },
  created() {
    this.getSettlement()
  },
  computed: {
    formatTableData(){
      return this.tableData.map(item=>{
        return item;
      })
    }
  },
  methods: {
    getSettlement(){
      this.id = this.$route.query.id
      this.tableParams.settleId = this.id
      getSettlementInfo(this.id)
        .then(res=>{
          this.data = res.data
          this.tableParams.times = [this.data.startTime, this.data.endTime]
          this.getData()
        })
    },
    downLoad(){
      this.downloadLoading = true
      const params = {
        page: 1,
        pageSize: 30000,
        settleId: this.id
      }
      exportSettleById(params)
        .then(res=>{
          this.downloadLoading = false
          if(res.error === 0){
            if(res.data.excelPath){
              window.open(res.data.excelPath,"_blank");
            }else{
              EventBus.$emit('showExportDraw')
            }

          }
        })
    },
    getData(){
      this.tableLoading = true
      let func = getStickerOrderList
      if(this.tab === 'FLShipment'){
        func = getFLShipmentList
      }else if(this.tab === 'middleOrder'){
        func = getMiddleOrderList
      }else if(this.tab === 'labelOrder'){
        func = getLabelOrderList
      }
      func(this.tableParams)
        .then(res=>{
          this.tableLoading = false
          this.tableData = res.data

          this.total = res.info.total
        })
    },
    changeOption(){
      this.tableParams.page = 1;
      this.getData()
    },
  }
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px;
  .content{
    margin-top: 20px;
  }
}
.header-card{
  position: relative;
  background: #d4d7d6;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
</style>
